<template>
	<view class="g-previewImage" v-if="show">
		<view class="image" :style="{width, height}">
			<image :src="link" :mode="mode"></image>
		</view>
		<u-icon class="icon" name="close" color="#eee" @click="close"></u-icon>
	</view>
</template>

<script>
	export default {
		name: "PreviewImage",
		data() {
			return {
				link: "",
				show: false,
				width: 0,
				height: 0,
				mode: 'aspectFit' // 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
			}
		},
		methods: {
			open(url) {
				const img = new Image()
				img.src = url
				this.width = img.width > img.height ? '100%' : img.width + 'px'
				this.height = img.height > img.width ? '100%' : img.height + 'px'
				this.link = url
				this.show = true
			},
			close() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.g-previewImage {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99999;

		.image {

			// background-color: pink;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.icon {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
		}
	}
</style>
